<template>
  <div>
    <div>
      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
     
    </div>
    <div>
     <van-button class="repeat">次要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
     
    </div>
    <div>
     <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
    </div>
    <div>
      <van-stepper v-model="value" />
    </div>
    <div>
    <van-goods-list
        finished-text="no more"
        :data="list"
        :loading="loading"
        :finished="finished"
        @click="itemClick"
        @load="onLoad"
        @change="change"
    >
    </van-goods-list>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Button } from 'vant';
  import { Stepper } from 'vant';
  import GoodsList from 'saas-tenant-mui';
  import { Toast } from 'vant';

  Vue.use(GoodsList);
  Vue.use(Stepper);
  Vue.use(Button);
  export default {
    name: "buttons",
    components: {},
    props: {},
    data() {
      return {
        value: 1,
        list: [
          {
            title:
              '这是一段两行的标题，最多只能有两行，最多只能有两行,最多只能有两行,最多只能有两行,最多只能有两行,最多只能有两行,最多只能有两行',
            content:
              '这是一段内容多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行，最多只能有两行',
            coverImage:
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589976036039&di=55bf0928d07fc305564e3b565867ec9f&imgtype=0&src=http%3A%2F%2Ffile8.gucn.com%2Ffile%2FCurioPicfile%2F20180408%2FGucnP_U306064T496208691523173660064.jpg',
            price: 70,
            goodsCount: 10,
            id: '100',
          },
        ],
        loading: false,
        finished: false,
        pageNum: 1,
        pageSize: 10,
        totalPage: 4,
      }
    },
      methods: {
      itemClick(item) {
        Toast.success(item.title);
      },
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        for (let i = 0; i < this.pageSize; i++) {
          this.list.push({
            title:
              '这是一段标题文本,,这是一段' +
              ((this.pageNum - 1) * this.pageSize + i),
            content:
              '这是一行辅助信息1' + ((this.pageNum - 1) * this.pageSize + i),
            coverImage:
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589976036039&di=55bf0928d07fc305564e3b565867ec9f&imgtype=0&src=http%3A%2F%2Ffile8.gucn.com%2Ffile%2FCurioPicfile%2F20180408%2FGucnP_U306064T496208691523173660064.jpg',
            goodsCount: 1 + i,
            price: 80 + i,
            id: (this.pageNum - 1) * this.pageSize + i,
          });
        }
        console.log('onLoad');
        console.log('length:' + this.list.length);
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.pageNum >= this.totalPage) {
          Toast.success(
            '数据全部加载完成:' +
            this.list.length +
            ',' +
            this.pageNum +
            ',page:' +
            this.totalPage
          );
          this.finished = true;
        }
        this.pageNum++;
      },

      change(item) {
        Toast.success(item.goodsCount * item.price);
      },
    },
  }
</script>

<style scoped>
</style>
